<template>
  <el-form
      class="infoForm"
      :rules="rules"
      :model="GoodsInfo"
      ref="GoodsForm"
  >
    <el-form-item label="商品名称" prop="goods_name">
      <el-input placeholder="请输入商品名称" v-model="GoodsInfo.goods_name"></el-input>
    </el-form-item>
    <el-form-item label="商品分类" prop="goods_type">
      <el-select v-model="GoodsInfo.goods_type" class="m-2" placeholder="Select" size="large">
        <el-option
            v-for="(item,index) in data"
            :key="item.good_type_id"
            :label="item.type_name"
            :value="item.good_type_id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="商品图片" prop="goods_img">
      <a v-if="GoodsInfo.goods_img" v-for="(item,index) in GoodsInfo.goods_img" :key="index" :href="item"  target="_blank" style="position: relative" class="img">
        <el-icon class="clearImg" @click.prevent="clearImg(index)"><CloseBold /></el-icon>
        <img  :src="item" class="avatar"  alt="" style="width: 100px;height: 100px;margin-right: 10px"/>
      </a>
      <el-upload
          class="avatar-uploader"
          action="http://api_devs.wanxikeji.cn/api/savePic"
          name="img"
          :show-file-list="false"
          :on-success="Updatasuccess"
      >

        <el-icon class="avatar-uploader-icon"><Plus /></el-icon>

      </el-upload>

    </el-form-item>
    <el-form-item label="商品编码" prop="goods_number">
      <el-input placeholder="请输入商品编码" v-model="GoodsInfo.goods_number"></el-input>
    </el-form-item>
    <el-form-item label="运费模板">
      <el-select v-model="GoodsInfo.goods_freight" clearable placeholder="请选择运费模板">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="商品状态">
      <el-radio-group v-model="GoodsInfo.goods_state">
        <el-radio :label="1">上架</el-radio>
        <el-radio :label="0">下架</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="商品排序" prop="goods_sort">
      <el-input v-model="GoodsInfo.goods_sort"></el-input>
    </el-form-item>
    <el-button type="primary" @click="GoodsInfoSubmit(GoodsForm)">提交</el-button>
  </el-form>
</template>
<script setup>
import {onBeforeMount, onMounted, reactive, ref, computed, watch} from "vue"
import {getGoodsTypeList} from "../../../HTTP/api/goods";
import {getPermissionListArr} from '@/util/getUser'
import {useStore} from 'vuex'
import {ElLoading} from "element-plus";
import {useRoute} from "vue-router";
import edits from "@/store/modules/editorgoods";
const route=useRoute()
const store=useStore()
const GoodsForm = ref()
const activeName = ref("first")
const data = ref()
let GoodsInfo = reactive({
  goods_name: "",
  goods_number: "",
  goods_sort: "100",
  goods_state: 1,
  goods_type: "",
  goods_img: [],
  goods_freight: '',
  type_parent_id:'',
  good_id:''
})
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  }]

const defaultProps = {
  value: "good_type_id",
  children: 'children',
  label: 'type_name',
}
const rules = reactive({
  goods_name: [{required: true, message: '不能为空', trigger: 'blur'},
    {min: 2, message: '请输入至少两个字符', trigger: 'blur',}],
  goods_type: [{required: true, message: '请至少选择一种分类', trigger: 'blur'}],
  goods_img: [{type: 'array', required: true, message: '请至少上传一张图片', trigger: 'change'}]
})
const Updatasuccess = (res) => {
  if(res.code===2000){
    GoodsInfo.goods_img.push("http://api_devs.wanxikeji.cn/"+res.data)
  }
}
const clearImg=(index)=>{
  GoodsInfo.goods_img.splice(index,1)
}
//提交
const emit = defineEmits(["InfoSubmit"])

const GoodsInfoSubmit = () => {
    data.value.forEach(item=>{
      if(item.good_type_id===GoodsInfo.goods_type){
          GoodsInfo.type_parent_id=item.parent_id
      }
    })
  store.commit("goods/get_goodsInfo",GoodsInfo)
  GoodsInfo.good_id=route.query.goodsId || ""
  emit("InfoSubmit")
}
//给父亲
defineExpose({
  GoodsForm
})
//获取商品列表
onMounted(() => {
  getGoodsTypeList().then(res => {
    data.value = res.data
  })
let temInfo=computed(()=>{
  return store.state.edits.goods_info
})
 watch(temInfo,(val)=>{
   GoodsInfo.goods_name=val.goods_name
   GoodsInfo.goods_type=val.goods_type
   GoodsInfo.goods_img.push(val.goods_img)
   GoodsInfo.type_parent_id=val.type_parent_id
 })
})
</script>
<style scoped>
.infoForm {
  width: 700px;
  margin-left: 100px;
  margin-top: 50px;
  margin-bottom: 100px;
}
.el-form-item {
  margin-bottom: 20px;
}
.el-input {
  height: 40px;
}
.el-form-item {
  align-items: center;
  margin-bottom: 20px;
}
.avatar-uploader-icon{
  width: 100px;
  height: 100px;
  border: 1px solid rgba(0,0,0,0.1);
}
.clearImg{
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  z-index: 22;
}
.img:hover .clearImg{
  display: block;
}
.el-select-dropdown__item{
  width: 100%;

}
</style>

